<div class="container-fluid">
    <div class="row">
      <div class="col bg-dark text-white">
        <a class="navbar-brand">SPORTS STORE</a>
        <cart-summary></cart-summary>
      </div>
    </div>
    <div class="row">
  
      <div class="col-3 p-2">
        <button class="btn btn-block btn-outline-primary" (click)="changeCategory()">
          Home
        </button>
        <button *ngFor="let cat of categories" 
            class="btn btn-outline-primary btn-block"
            [class.active]="cat == selectedCategory" (click)="changeCategory(cat)">
          {{cat}}
        </button>
      </div>
  
      <div class="col-9 p-2">
        <div *ngFor="let product of products" class="card m-1 p-1 bg-light">
          <h4>
            {{product.name}}
            <span class="badge badge-pill badge-primary float-right">
              {{ product.price | currency:"USD":"symbol":"2.2-2" }}
            </span>
          </h4>
          <div class="card-text bg-white p-1">
            {{product.description}}
            <button class="btn btn-success btn-sm float-right"
                    (click)="addProductToCart(product)">
              Add To Cart
            </button>
          </div>
        </div>
  
        <div class="form-inline float-left mr-1">
          <select class="form-control" [value]="productsPerPage"
                  (change)="changePageSize($event.target.value)">
            <option value="3">3 per Page</option>
            <option value="4">4 per Page</option>
            <option value="6">6 per Page</option>
            <option value="8">8 per Page</option>
          </select>
        </div>
  
        <div class="btn-group float-right">
          <button *counter="let page of pageCount" (click)="changePage(page)"
              class="btn btn-outline-primary" [class.active]="page == selectedPage">
            {{page}}
          </button>
        </div>
  
      </div>
    </div>
  </div>
  